body{
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    #slide{
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;

        // transition-duration: 3s;
        // transform-style: preserve-3d;
        // transform:perspective(900px);
        &:hover{
            // transform:perspective(900px) rotateX(180deg) ;

        }
        
        section{
            
            transition-duration: 1s;
            transform-style: preserve-3d;
            
            div{
                overflow: hidden;
                position: absolute;
                @for $i from 1 to 5 {
                    &:nth-child(#{$i}){
                        transform: rotateX(#{$i * 90 }deg);
                    }
                }
                a{
                    display: block;
                    // img{
                    //     overflow: hidden;
                    // }
                }
            }
        }
        .btns{
            position: absolute;
            bottom: 5%;
            width: 200px;
            display: flex;
            justify-content: space-between;
            span{

                cursor: pointer;
                width: 30px;
                height: 30px;
                border-radius: 50%;
                background-color:steelblue;
                color: white;
                display: flex;
                justify-content: center;
                align-items: center;
                opacity: 0.6;
                &.active{
                    background-color: gray;
                    border: solid 1px black;
                }
            }
        }
    }
}